<template>
  <div class="entry-box">
    <div class="entry-title">{{ info.entryTitle }}</div>
    <div class="entry-options">
      <div
        v-for="entryItem in entryOption"
        :key="entryItem.name"
        class="entry-item"
        @click="handleGotoMenu(entryItem.menuId)"
      >
        <div class="entry-icon" :style="{ 'background-color': entryItem.iconBg }">
          <i :class="entryItem.icon"></i>
        </div>
        <div class="entry-name">{{ entryItem.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, toRefs, onMounted } from 'vue';
  import { useI18n } from '@common/locales';
  import { useMicroStore } from '@common/store/micro-store';
  export default defineComponent({
    name: 'DevelopEntry',
    setup() {
      const microStore = useMicroStore();
      const t = useI18n().t;
      const state = {
        info: {
          entryTitle: t('developBoard.fastEntry'),
          dataDiction: t('developBoard.dataDiction'),
          resource: t('developBoard.resource'),
          subsystem: t('developBoard.subsystem'),
          menu: t('developBoard.menu'),
          workflow: t('developBoard.workflow'),
          process: t('developBoard.process'),
          platform: t('developBoard.platform'),
          system: t('developBoard.system'),
        },
        entryOption: [
          {
            name: t('developBoard.dataDiction'),
            icon: 'fal fa-book',
            iconBg: '#f24f54',
            menuId: 'fe8666a4-7d6f-4bb6-8d70-49d766c82c33',
          },
          {
            name: t('developBoard.resource'),
            icon: 'jeicon jeicon-table',
            iconBg: '#00b5b5',
            menuId: 'c0eece32-ddc0-4a54-b896-29d5059738a2',
          },
          {
            name: t('developBoard.subsystem'),
            icon: 'jeicon jeicon-subfunction',
            iconBg: '#00a664',
            menuId: 'aa413989-2743-4fe5-87e1-8c822275038c',
          },
          {
            name: t('developBoard.menu'),
            icon: 'fal fa-poll-h',
            iconBg: '#fe774b',
            menuId: 'c108mbhoApKgOEMAZYM',
          },
          {
            name: t('developBoard.workflow'),
            icon: 'fal fa-sitemap',
            iconBg: '#fbc754',
            menuId: '77vmQ3FGhHymU4GguhX',
          },
          {
            name: t('developBoard.process'),
            icon: 'fal fa-sliders-h-square',
            iconBg: '#f5d540',
            menuId: 'xONpEjU9DzKPSkRRaVb',
          },
          {
            name: t('developBoard.platform'),
            icon: 'fal fa-tools',
            iconBg: '#f24f54',
            menuId: 'eyBZYHcDhA9Z84aRbLK',
          },
          {
            name: t('developBoard.system'),
            icon: 'fal fa-cog',
            iconBg: '#00b5b5',
            menuId: 'djPuCGAxpzBycCrYgsY',
          },
        ],
      };
      const handleGotoMenu = (menuId) => {
        if (menuId) {
          //跳转到对应功能模块
          microStore.emitAdmin('admin-openmenu', { menuId: menuId });
        }
      };
      onMounted(() => {});
      return {
        handleGotoMenu,
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped lang="less">
  .entry-box {
    width: 100%;
    margin-top: 20px;
    border-radius: 4px;
    background-color: #ffffff;
    box-sizing: border-box;
    padding-bottom: 20px;
    .entry-title {
      width: 100%;
      height: 60px;
      line-height: 60px;
      padding: 0 20px;
      font-size: 16px;
      font-weight: bold;
      color: #3f3f3f;
      // font-family: 'PingFang SC, PingFang SC-Bold';
    }
    .entry-options {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 85px;
      .entry-item {
        width: 70px;
        cursor: pointer;
        .entry-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin: 0 auto;
          position: relative;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          i {
            font-size: 20px;
            color: #ffffff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .entry-name {
          width: 100%;
          height: 20px;
          line-height: 20px;
          text-align: center;
          font-size: 14px;
          // font-family: 'PingFang SC, PingFang SC-Normal';
          color: #3f3f3f;
          margin-top: 3px;
        }
      }
    }
  }
</style>
